<template>
  <GridPage title="企业关注列表" size="default">
    <n-card
      :bordered="false"
      style="border-radius: 10px"
      class="mt-12 h-300"
      v-show="followings.length === 0"
    >
      <n-flex align="center" justify="center" class="h-100%">
        <n-empty size="huge" description="没有关注的企业">
          <template #extra>
            <n-button size="small" @click="handleChangePage">去招聘首页看看</n-button>
          </template>
        </n-empty>
      </n-flex>
    </n-card>
    <n-card v-for="item in followings" :bordered="false" style="border-radius: 10px" class="mt-12">
      <div class="flex">
        <a :href="'/company/' + item.company_id" target="_blank">
          <n-flex align="center">
            <n-avatar :src="item.company_icon" :size="64" />
            <n-flex vertical :size="0">
              <n-text>
                {{ item.company_name }}
              </n-text>
              <n-flex class="text-12">
                <n-text style="color: #999">
                  {{ getIndustriesName(item.industry_code) }}
                </n-text>
                <n-text style="color: #999">
                  {{ getCompanySize(item.size) }}
                </n-text>
                <n-text style="color: #999">
                  {{ getCity(item.address_code) }}
                </n-text>
              </n-flex>
              <n-flex class="mt-5">
                <n-tag
                  v-for="t in item.company_tags"
                  size="small"
                  :bordered="false"
                  :color="{ color: '#f8f8f8', textColor: '#8d92a1', borderColor: '#fff' }"
                >
                  {{ t }}
                </n-tag>
              </n-flex>
            </n-flex>
          </n-flex>
        </a>
        <n-flex class="ml-auto" align="center">
            <n-button type="primary" text @click="handleDetail(item.company_id)">查看详情</n-button>
        </n-flex>
      </div>
    </n-card>
  </GridPage>
</template>

<script setup>
import { GridPage } from '@/components'
import { useSeekerStore } from '@/store'
import { getIndustriesName, getCity, getCompanySize } from '@/data'
import seekerApi from '@/api/seeker'
import { useRouter } from 'vue-router'
const seekerStore = useSeekerStore()
const router = useRouter()

const followings = ref([])

function handleChangePage() {
  router.push('/')
}

function handleDetail(company_id) {
    router.push('/company/' + company_id)
}

onMounted(async () => {
  const { data } = await seekerApi.getFollowing(seekerStore.seeker.seeker_id)
  followings.value = data
})
</script>
